<script setup>
import PageContainer from '@/components/PageContainer.vue'
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useSetPasswordService } from '@/api/request.js'
import { useUserStore } from '@/stores/index.js'
import { useRouter } from 'vue-router'

const router = useRouter()

const form = ref()
const formData = ref({
  old_pwd: '',
  new_pwd: '',
  re_pwd: ''
})

const rules = {
  old_pwd: [
    {
      required: true,
      message: '请输入原有密码',
      trigger: 'blur'
    }
  ],
  new_pwd: [
    {
      required: true,
      message: '请输入新密码',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]{6,10}$/,
      message: '密码格式应为6-10位的数字与字母组合',
      trigger: 'blur'
    }
  ],
  re_pwd: [
    {
      required: true,
      message: '请确认',
      trigger: 'blur'
    },
    {
      pattern: /^[a-zA-Z0-9]{6,10}$/,
      message: '密码格式应为6-10位的数字与字母组合',
      trigger: 'blur'
    },
    {
      // 自定义验证规则
      validator: (rule, value, callback) => {
        if (value !== formData.value.new_pwd) {
          // 验证失败 回调中返回错误信息
          callback(new Error('二次密码不一致'))
          return
        }
        // 验证通过 调用回调放行
        callback()
      },
      trigger: 'blur'
    }
  ]
}

// 清除表单
const resetFromData = () => {
  Object.assign(formData.value, { old_pwd: '', new_pwd: '', re_pwd: '' })
}
// 提交回调
const save = async () => {
  ElMessageBox.confirm('您确定要修改吗', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    await form.value.validate()
    await useSetPasswordService(formData.value)
    ElMessage.success('修改成功')
    useUserStore().removeToken()
    await router.push('/login')
  })
}
</script>

<template>
  <div class="reset-password">
    <PageContainer title="重置密码">
      <template #main>
        <div class="card_main">
          <el-form
            :model="formData"
            :rules="rules"
            ref="form"
            style="width: 500px"
          >
            <el-form-item prop="old_pwd" label="原密码" label-width="100px">
              <el-input
                type="password"
                size="large"
                placeholder="请输入原密码"
                v-model="formData.old_pwd"
              ></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="new_pwd" label-width="100px">
              <el-input
                type="password"
                size="large"
                placeholder="请输入新密码"
                v-model="formData.new_pwd"
              ></el-input>
            </el-form-item>
            <el-form-item label="确认新密码" prop="re_pwd" label-width="100px">
              <el-input
                type="password"
                size="large"
                placeholder="请确认密码"
                v-model="formData.re_pwd"
              ></el-input>
            </el-form-item>
          </el-form>
          <div class="button">
            <el-button type="primary" plain @click="save"> 提交修改 </el-button>
            <el-button type="success" plain @click="resetFromData">
              重置
            </el-button>
          </div>
        </div>
      </template>
    </PageContainer>
  </div>
</template>

<style scoped lang="less">
.card_main {
  height: 50vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
</style>
